<template>
  <div class="wx-reply-editor-wrap">
    <div class="mt-30 wx-reply-editor-title">
      <div class="d-aic title-content-wrap">
        <div class="title-content">{{ title }}</div>
        <div class="title-desc">*{{ tips }}</div>
      </div>
      <div class="d-jcs-aic title-link-btn">
        <div class="quick-btn-wrap d-aic">
          <div class="quick-btn" v-for="(item,index) in btnList " :key="index">
            <template>
              <a-popover v-if="item.type==='array'" placement="bottom">
                <template slot="content">
                  <p
                    style="cursor: pointer;"
                    v-for="(itemName,itemIndex) in item.names"
                    :key="itemIndex"
                    @click="insertSpan(itemName)">{{ itemName }}</p>
                </template>
                <a-icon class="quick-icon" :type="item.icon"/>
                <span class="quick-name">{{ item.name }}</span>
              </a-popover>
              <div v-else @click="insertSpan(item.name)">
                <a-icon class="quick-icon" :type="item.icon"/>
                <span class="quick-name">{{ item.name }}</span></div>
            </template>
          </div>
        </div>
        <div class="link-wrap">
          <a-button type="link" @click="showSampleCopy=true">示例文案</a-button>
        </div>
      </div>
    </div>
    <wx-reply-editor ref="replyEditor" :value="value" @input="changeValue"/>
    <a-modal v-model="showSampleCopy" :title="null" :footer="null" width="430px">
      <p
        class="samplex copyText mt-20"
        data-clipboard-action="copy"
        :data-clipboard-text="sampleCopy[sampleCopyType]"
        @click="copySample"
        v-html="sampleCopy[sampleCopyType]"/>
      <div class="mt-30 d-aic" style="justify-content: flex-end;">
        <b-button
          ghost="default"
          type="default"
          @click="showSampleCopy=false"
          btnContent="取消">
          取消
        </b-button>
        <b-button
          class="copyText"
          type="primary"
          style="margin-left: 10px"
          data-clipboard-action="copy"
          :data-clipboard-text="sampleCopy[sampleCopyType]"
          @click="copySample"
          btnContent="一键复制"/>
      </div>
    </a-modal>
  </div>
</template>

<script>
    import WxReplyEditor from './wx-reply-editor'
    import Clipboard from 'clipboard'

    export default {
        name: 'WxReplyEditorWrap',
        components: { WxReplyEditor },
        props: {
            value: {
                type: String,
                default: null
            },
            title: {
                type: String,
                default: null
            },
            tips: {
                type: String,
                default: null
            },
            sampleCopyType: {
                type: String,
                default: null
            },
            menus: {
                type: Array,
                default: () => {
                    return ['user', 'team', 'pushpin', 'message', 'contacts', 'link']
                }
            }
        },
        data () {
            return {
                linkBtnList: [
                    {
                        icon: 'user',
                        name: '昵称',
                        type: ['keyword', 'guide', 'ladder', 'end', 'pushHelp', 'pushJoin']
                    },
                    {
                        icon: 'team',
                        name: '好友',
                        type: ['keyword', 'ladder', 'pushHelp', 'pushJoin']
                    },
                    {
                        icon: 'pushpin',
                        name: '奖品剩余数',
                        type: 'array',
                        // type: ['keyword', 'ladder', 'pushJoin']
                        names: ['一级奖品剩余数量', '二级奖品剩余数量', '三级奖品剩余数量']
                    },
                    {
                        icon: 'message',
                        name: '邀请人数',
                        type: ['ladder', 'pushJoin']
                    },
                    {
                        icon: 'contacts',
                        name: '阶梯助力人数',
                        type: 'array',
                        names: ['一级阶梯数', '二级阶梯数', '三级阶梯数']
                        // type: ['keyword', 'ladder', 'pushJoin']
                    },
                    {
                        icon: 'link',
                        name: '链接',
                        type: ['keyword', 'guide', 'ladder', 'end', 'pushHelp', 'pushJoin']
                    }
                ],
                showSampleCopy: false,
                textCopy: '',
                sampleCopy: {
                    guide: '哈喽[昵称]，添加下方XX老师微信，即可为好友成功助力哦～\n' +
                        '添加好友后，还能一起参与免费领取XX福利哦！',
                    keywordReply: '哈喽[昵称]，您已成功参与xx活动\n' +
                        '分享下方海报，\n' +
                        '邀请XX友助力并添加xx老师微信，可获得xx\n' +
                        '邀请XX位好友助力并添加xx老师微信，可获得xx\n' +
                        '\n' +
                        '奖品限量XX份，已有XX人领取\n' +
                        '快去分享你的专属海报',
                    pushHelp: '您的好友[昵称]支持你了\n' +
                        '人气值+1\n' +
                        '目前已有已完成任务量人支持你！\n' +
                        '还差XX人即可获取xx礼物～\n' +
                        '\n' +
                        '查看排行榜及好友助力详情',
                    pushJoin: 'hello~[昵称]，您已为好友助力成功~ \n' +
                        '转发下方你的专属海报 \n' +
                        ' \n' +
                        '邀请XX位好友助力并添加xx老师微信，可获得xx\n' +
                        '邀请XX位好友助力并添加xx老师微信，可获得xx\n' +
                        '\n' +
                        '奖品限量XX份，已有XX人领取\n' +
                        '快去分享你的专属海报',
                    end: '本次活动已经结束了，感谢您的参与\n' +
                        '添加小助手微信：\n' +
                        '可免费领取“感恩大礼包”一份',
                    ladder1: '[昵称]支持你啦，恭喜您成功解锁xx！\n' +
                        '添加小助手微信，即可领取！\n' +
                        '再邀请XX位好友关注，\n' +
                        '可领取xx礼物哦～，快去邀请好友助力吧～',
                    ladder2: '[昵称]支持你啦，恭喜您成功解锁xx\n' +
                        '联系小助手领取福利～',
                    ladder3: '[昵称]支持你啦，恭喜您成功解锁xx\n' +
                        '联系小助手领取福利～'
                }
            }
        },
        computed: {
            btnList () {
                const list = []
                if (this.menus.length) {
                    this.menus.forEach(item => {
                        this.linkBtnList.forEach(btnItem => {
                            if (btnItem.icon === item) {
                                list.push(btnItem)
                            }
                        })
                    })
                }
                return list
            }
        },
        methods: {
            /**
             * 插入内容时，如果需要内容不可被编辑，则contenteditable设为false
             * @param name
             */
            insertSpan (name) {
                if (name === '链接') {
                    this.$refs.replyEditor.mceInsertLink()
                } else {
                    const value = `[` + name + `]`
                    this.$refs.replyEditor.insertContent(value)
                }
            },
            destroyTinymce () {
                this.$refs.replyEditor.destroyTinymce()
            },
            changeValue (value) {
                this.$emit('input', value)
            },
            copySample () {
                const clipboard = new Clipboard('.copyText')
                const self = this
                clipboard.on('success', function (e) {
                    clipboard.destroy()
                    self.$message.success('复制成功')
                    e.clearSelection()
                    self.showSampleCopy = false
                })
                clipboard.on('error', function (e) {
                    self.$message.error('复制失败')
                    clipboard.destroy()
                    self.showSampleCopy = false
                })
            }
        }
    }
</script>

<style scoped lang="less">

    .wx-reply-editor-title {
        padding: 11px 14px;
        width: 630px;
        height: 85px;
        border: 1px solid #D9D9D9;
        border-bottom: none;

        .title-content-wrap {
            height: 20px;
        }

        .title-content {
            font-size: 14px;
            color: #595959;
        }

        .title-desc {
            margin-left: 12px;
            font-size: 12px;
            color: #BFBFBF;
        }

        .title-link-btn {
            margin-top: 17px;
            height: 22px;
        }

        .quick-btn-wrap {
            flex-grow: 1;

            .quick-btn {
                cursor: pointer;
            }

            .quick-icon {
                font-size: 20px;
                color: #8C8C8C;
            }

            .quick-name {
                margin-left: 4px;
                font-size: 14px;
                color: #8C8C8C;
            }
        }

        .quick-btn + .quick-btn {
            margin-left: 6px;
        }

        .link-wrap {
            margin-left: 12px;
            flex-shrink: 0;
        }
    }

    .ml-30 {
        margin-left: 30px;
    }

    .mt-30 {
        margin-top: 30px;
    }

    .samplex {
        white-space: pre;
        width: 330px;
    }
</style>
